<template>
	<view class="box">
		<view v-for="i in data" :key="i._id">
			<view class="top">
				<image :src="i.imgurl"></image>
			</view>
			<view class="title">
				{{i.title}}
			</view>
			<view class="Preview">
				<text>预览 {{i.Preview}}</text>
				<text>收藏 {{i.Save}}</text>
			</view>
			<view class="time">
				<image src="../../static/钟点.png" :style="{width: '30rpx',
				 height:'30rpx'}"></image>{{i.time}}
			</view>
			<view class="time">
				<image src="../../static/线上课.png" :style="{width: '30rpx',
				 height:'30rpx'}"></image>
				<text>{{i.Live=='672b23fbb42874319450de09'?"线上活动":i.address}}</text>
			</view>
			<view class="price">
				<text>{{i.Free=="672b242db42874319450de0d"?"免费":i.price}}</text>
			</view>
			<view class="announcer">
				<view class="data">
					<view class="dtop">
						<view class="left"><img :src="i.aid.avatar" alt="" /></view>
						<view class="content">
							<text>{{i.aid.name}}</text>
							<image src="../../static/认证.png" mode="widthFix"></image>
						</view>
						<view class="right"><button>关注</button></view>
					</view>
				<view class="dbottom">
					<view class="left">
						活动 {{data1.length}}
					</view>
					<view class="right">
						粉丝 {{i.aid.fan}}
					</view>
				</view>
				</view>
			</view>
			<view class="deails">
				活动详情
			</view>
			<view class="tp">
			<image v-for="y in i.detail" :src="y" mode="widthFix"></image>
				
			</view>
		</view>
		<view class="bm">
			<view >
				<image :src="data[0].aid.avatar" mode=""></image>
				<text>活动号</text>
			</view>
			<view >
				<uni-icons type="heart" color="#2CA465" size="30"></uni-icons>
				<text>收藏</text>
			</view>
			<view >
				<button @getuserinfo="getuserinfo" >立即报名</button>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { onLoad } from '@dcloudio/uni-app'
	import { ref, onMounted } from 'vue';
	
	let getuserinfo=(e)=>{
		console.log(e);
	}
	let id = ref()
	let aid = ref()
	let data = ref()
	let data1 = ref()
	let getact=()=>{
		uni.request({
			url: 'http://127.0.0.1:3000/xaw/getact',
			data: {
				aid: aid.value
			},
			success(res) {
				console.log(res);
				data1.value = res.data.data
			}
		})
	}
	let getactivitydeail = () => {
		uni.request({
			url: 'http://127.0.0.1:3000/xaw/getactivitydeail',
			data: {
				id: id.value
			},
			success(res) {
				console.log(res);
				data.value = res.data.data
			}
		})
	}
	onLoad((options) => {
		id.value = options.id
		aid.value = options.aid
	})
	onMounted(() => {
		getactivitydeail()
		getact()
	})
</script>

<style scoped lang="scss">

	.box {
		.bm{
			width: 750rpx;
			height: 120rpx;
			position: fixed;
			bottom: 0;
			display: flex;
			background-color: #FFFFFF;
			justify-content: space-around;
			align-items: center;
			button{
				width: 400rpx;
				height: 90rpx;
				border-radius: 80rpx;
				line-height: 80rpx;
				background-color: #09CD8F;
				color: #fff;
				font-size: 30rpx;
			}
			view:nth-child(1){
				width: 100rpx;
				height: 90rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: center;
				font-size: 20rpx;
				color: #969696;
				image{
					width: 50rpx;
					height: 50rpx;
				}
				
			}
			view:nth-child(2){
				width: 100rpx;
				height: 90rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: center;
				font-size: 20rpx;
				color: #969696;
				image{
					width: 50rpx;
					height: 50rpx;
				}
				
			}
		}
		.announcer{
			width: 750rpx;
			height: 300rpx;
			padding: 30rpx;
			box-sizing: border-box;
			.data{
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				background-color: #31343B;
				width: 690rpx;
				height: 220rpx;
				border-radius: 20rpx;
				padding: 20rpx;
				box-sizing: border-box;
				.dbottom{
					margin-bottom: 20rpx;
					width: 100%;
					display: flex;
					.right{
						width: 380rpx;
						text-align: center;
						line-height:20rpx ;
						color: #fff;
						font-size: 20rpx;
						height:20rpx ;
					}
					.left{
						font-size: 20rpx;
						width: 330rpx;
						height:20rpx ;
						text-align: center;
						line-height:20rpx ;
						color: #fff;
						border-right: 1px solid #EBEEF5;
					}
				}
				.dtop{
					display: flex;
					.right{
						display: flex;
						align-items: center;
						button{
							width: 140rpx;
							font-size: 20rpx;
							height: 50rpx;
							line-height: 50rpx;
							border-radius: 30rpx;
							background-color: #09CA91;
							color: #fff;
						}
						
					}
					.content{
						margin-left: 20rpx;
						margin-right: 80rpx;
						display: flex;
						flex-direction: column;
						color: #fff;
						font-weight: bolder;
						justify-content: space-between;
						image{
							width:200rpx;
						}
					}
					.left{
						width: 100rpx;
						height: 100rpx;
						img{
							width: 100rpx;
							height: 100rpx;
							border-radius: 10rpx;
						}
					}
				}
				
			}
		}
		.tp{
			padding-top: 0px;
			padding-left: 30rpx;
			padding-right: 30rpx;
			box-sizing: border-box;
			width: 750rpx;
			height: 100vh;
		}
		.deails{
			font-size: 40rpx;
			font-weight: bolder;
			padding: 30rpx;
		}
		.price {
			font-size: 40rpx;
			font-weight: bolder;
			padding-top: 20rpx;
			padding-left: 30rpx;
			color: #09B153;
		}

		.time {
			font-size: 20rpx;
			display: flex;
			align-items: center;
			padding-top: 30rpx;
			padding-left: 30rpx;

			image {
				margin-right: 10rpx;
			}
		}

		.top {
			width: 750rpx;
			height: 420rpx;
			padding: 30rpx;
			box-sizing: border-box;
		}

		.title {
			padding: 30rpx;
			font-weight: bolder;
			font-size: 40rpx;
		}

		.Preview {
			width: 260rpx;
			padding-left: 30rpx;
			display: flex;
			justify-content: space-between;
			font-size: 20rpx;
			box-sizing: border-box;
			color: #A6A6A6;
		}
		
		image {
			width: 690rpx;
			height: 390rpx;
			border-radius: 30rpx;
		}
	}
</style>